"use strict";
var vue = new Vue({
    el: '#app',
    data() {
        return {
            vueHeader: {
                // 必须要声明一下，否则找不到变量
                userInfo: {}
            },
            // 查询是否收藏的条件控制
            isCollectionLimit: -1,
            // url中控制收藏条件查询
            isCollectionLimitUrl: -1,

            fileList: [], // 图片列表
            // 表单中的数据
            postFormData: {
                content: "",
            },
            // 表单的校验规则
            // postFormRules: {
            //     content: [
            //         { required: true, message: "请输入内容", trigger: "blur" }
            //     ]
            // },
            isPostChanging: false, // 是否正在选择/压缩/上传/帖子或图片
            postChangingId: -1, // 正在被点赞或收藏的帖子的id，如果没有正在点赞或收藏的，则设置这个的值为-1

            // 帖子的分页信息
            postPageInfo: {},
            postImageSize: "250px", // 帖子图片的大小
            test: "帖子"
        }
    },
    //钩子函数，VUE对象初始化完成后自动执行
    created() {
        // 获取url参数
        this.isCollectionLimitUrl = getParameter("isCollectionLimit");
        // 如果url中的收藏条件是1，那么需要将当前的收藏条件设为1，方便后面的分页查询
        if (this.isCollectionLimitUrl == 1) {
            this.isCollectionLimit = 1;
        }
        // 获取帖子列表信息
        getPostPageFromServer(this, 1, 3, this.isCollectionLimit);
    },
    mounted() {
        let that = this;
        window.onscroll = function () {
            // 变量scrollTop是滚动条滚动时，距离顶部的距离
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 变量windowHeight是可视区的高度
            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            // 变量scrollHeight是滚动条的总高度
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

            // 滚动条到底部的条件
            if (scrollTop + windowHeight == scrollHeight) {
                console.log("距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight);
                that.appendPost();
            }
        }
    },
    methods: {
        isCollectionLimitChange() {
            if (this.isCollectionLimit != -1 && !this.vueHeader.isLogin) {
                this.$notify.error({ title: "错误", message: "您必须先登录，然后才能查看你的收藏" });
                return false;
            } else {
                return true;
            }
        },
        // 条件查询
        conditionSelect() {
            if (this.isCollectionLimitChange()) {
                getPostPageFromServer(this, 1, 3, this.isCollectionLimit);
            }
        },
        // 点赞
        praise(post) {
            // this.postChangingId = post.id;
            // axios.get(addressPLCLikeOrCancel + "?postId=" + post.id).then((result) => {
            //     if (result.data.flag) {
            //         if (post.isLike) { // 已经点赞了，准备取消点赞
            //             post.likeCount--;
            //         } else { // 没有点赞，准备点赞
            //             post.likeCount++;
            //         }
            //         post.isLike = !post.isLike;
            //         this.$notify({ title: "成功", message: result.data.message, type: "success" });
            //     } else {
            //         this.$notify.error({ title: "错误", message: result.data.message });
            //     }
            //     this.postChangingId = -1;
            // });

            postPraise(this, post);
        },
        // 收藏
        collect(post) {
            this.postChangingId = post.id;
            if (post.isCollection) { // 取消收藏操作
                axios.delete(addressPCCCancelCollection + "?postId=" + post.id).then((result) => {
                    if (result.data.flag) {
                        post.collectionCount--;
                        post.isCollection = !post.isCollection;
                        this.$notify({ title: "成功", message: result.data.message, type: "success" });
                    } else {
                        this.$notify.error({ title: "错误", message: result.data.message });
                    }
                    this.postChangingId = -1;
                });
            } else { // 收藏操作
                axios.post(addressPCCCollection, post).then((result) => {
                    if (result.data.flag) {
                        post.collectionCount++;
                        post.isCollection = !post.isCollection;
                        this.$notify({ title: "成功", message: result.data.message, type: "success" });
                    } else {
                        this.$notify.error({ title: "错误", message: result.data.message });
                    }
                    this.postChangingId = -1;
                });
            }
        },
        toPostDeatil(postId) {
            location.href = "/postDetail.html?postId=" + postId;
        },
        // 从服务器中获取下一页的数据，添加上去
        appendPost() {
            if (this.postPageInfo.hasNextPage) {
                getPostPageFromServer(
                    null, this.postPageInfo.nextPage, this.postPageInfo.pageSize, this.isCollectionLimit,
                    (result) => {
                        let newList = this.postPageInfo.list.concat(result.data.data.list);
                        result.data.data.list = newList;
                        this.postPageInfo = result.data.data;
                    });
            } else {
                console.log("没有数据了");
            }
        },
        /**
         * 上传文件改变事件
         * 就是用户选择了图片或更改了图片后触发的事件
         * @param {Event} event 事件
         */
        inputChange(event) {
            // 获取文件
            var file = event.target.files[0];
            if (file.size > 10 * 1024 * 1024) {
                this.$notify.error({ title: "错误", message: "图像大小不得超过10MB" });
            } else {
                this.isPostChanging = true;
                this.compressImage(file);
            }
        },
        /**
         * 压缩图片主函数
         * @param {File} file 图片文件
         */
        compressImage(file) {
            let that = this; // 不可省略
            var options = {
                file: file,
                // 压缩策略---------------
                quality: 0.7,
                mimeType: "image/jpeg",
                maxWidth: 400,
                maxHeight: 400,
                width: 400,
                height: 400,
                minWidth: 200,
                minHeight: 200,
                convertSize: Infinity,
                loose: true,
                redressOrientation: true,
                // 压缩策略结束-------------

                // 压缩前回调
                beforeCompress: function (result) {
                    console.log('压缩之前图片尺寸大小: ', result.size);
                    console.log('mime 类型: ', result.type);
                },

                // 压缩成功回调
                success: function (result) {
                    // 注意：file表示原来的图像，result表示压缩后的图像
                    console.log('压缩之后图片尺寸大小: ', result.size);
                    console.log('mime 类型: ', result.type);
                    console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%');

                    // 使用URL.createObjectURL方式回显
                    // 此方式返回的时候一个内存级的url，通用可以正常使用
                    result.previewImageUrl = URL.createObjectURL(result);
                    // 保存压缩后的图像，压缩后的图像保存到fileList中
                    that.fileList.push(result);

                    that.isPostChanging = false;
                },

                // 发生错误
                error: function (msg) {
                    that.isPostChanging = false;
                    that.$notify.error({ title: "错误", message: "图像压缩发生错误" });
                }
            };

            new ImageCompressor(options);
        },
        sendPost(formName) {
            // 判断用户是否登录
            if (!vueHeader.isLogin) {
                this.$notify.error({ title: "错误", message: "登录后才能发表" });
                return;
            }
            // this.$refs[formName].validate((valid) => {
            //     if (valid) {
            this.isPostChanging = true;
            // 构建FormData对象
            let formData = new FormData();
            for (let i = 0; i < this.fileList.length; i++) {
                formData.append("fileList", this.fileList[i]);
            }
            formData.append("content", this.postFormData.content);
            // 发送请求
            this.$notify.info({ title: "提示", message: "正在发布，请稍后！" });
            // 上传
            axios.post(addressPCAdd, formData).then((result) => {
                if (result.data.flag) {
                    // 上传成功
                    this.$notify({ title: "成功", message: result.data.message, type: "success" });
                    // 刷新页面
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                } else {
                    this.$notify.error({ title: "错误", message: result.data.message });
                    this.isPostChanging = false;
                }
            });
            // } else {
            //     console.log("表单校验未通过！");
            //     this.isPostChanging = false;
            //     return false;
            // }
            // });
        },
        // 清空表单，这个方法可以通用
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 注意，此方法由vueHeader在创建时自动调用，参数为vueHeader自身对象
        // 可以在vueHeader对象中获取到它的所有信息
        vueHeaderCreated(vueHeader) {
            console.log("vueHeader对象：");
            console.log(vueHeader);
            this.vueHeader = vueHeader;
        },
        // 屏幕大小变化事件，由vueHeader自动调用
        vueHeaderOnresize(screenWidth, screenHeight) {
            if (screenWidth < 500) {
                this.postImageSize = "110px";
            } else if (screenWidth < 810) {
                this.postImageSize = "150px";
            } else {
                this.postImageSize = "200px";
            }
        }
    }
});